<template>
	<view :style="{'--color':color}">
		
		<block v-if="info.length">
			<view class="row f-nowrap bgwhite padding30 m-bot20" v-for="(item,index) in info" :key="index"
				@click="toUrl(`/otherPage/forum/details?file_id=${item.file_id}`)">
				<view class="headImg bor_radius m-right20">
					<image :src="imgUrl + item.headimg" mode="aspectFill" class="wh bor_radius"></image>
				</view>
				<view class="flex-1 f-column">
					<view class="row color_16 size28 bold">{{item.uname}}</view>
					<text class="color_99 h6 m-top10 d-block">{{item.addTime}}</text>
					<view class="color_16 size32 m-top16 ellipsis_3">{{item.file_content}}</view>
					<scroll-view scroll-x="true" class="row nowrap listImg" v-if="item.fileImgArr && item.fileImgArr.length">
						<block v-for="(subItem,subIndex) in item.fileImgArr" :key="subIndex">
							<image :src="imgUrl+subItem" mode="aspectFill" class="listImg_li bor_radius_10"></image>
						</block>	
					</scroll-view>
					
					<view class="bgcolors padding4-20 d-inline-block bor_radius_20 m-top20" v-if="item.classifyid != classifyid"
						@click.stop="toUrl(`/otherPage/forum/theme?classifyid=${item.classifyid}`)">
						<view class="d-flex a-center h6 white">
							<text class="punIt flexac colors m-right10">#</text>
							<text class="m-right10">{{item.classname}}</text>
							<view class="iconfont icon-a-zujian32 white h7"></view>
						</view>
					</view>
					<view class="row m-top30 j-sb a-center">
						<view class="d-flex a-center p-re" @click.stop>
							<button class="navButton" open-type="share"></button>
							<view class="iconfont icon-fenxiang color_33 size30"></view>
							<text class="color_33 h7 m-left10">分享</text>
						</view>
						<view class="d-flex a-center">
							<view class="iconfont icon-a-zu1870 color_33 size36"></view>
							<text class="color_33 h7 m-left10">{{item.pinlun}}</text>
						</view>
						<view class="d-flex a-center" @click.stop="zanFileId(item)">
							<view class="iconfont icon-dianzan size34" :class="item.zanok == 1?'color':'color_33'"></view>
							<text class="h7 m-left10" :class="item.zanok == 1?'color':'color_33'">{{item.zan}}</text>
						</view>
					</view>
				</view>
			</view>
		</block>	
		
		<emptys v-else></emptys>
		
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		name:'list',
		props:['pageData','classifyid'],
		data() {
			return {
				imgUrl:this.imgUrl,
				info:[],
			}
		},
		methods: {
			zanFileId(item){
				this.$http.post({
					url: '/communityApi/zanFileId',
					data: {
						file_id: item.file_id,
						type:item.zanok==0?1:0
					}
				}).then(res => {
					if (res.code != '100') return this.$Toast(res.msg);
					let filIndex = this.info.findIndex(n=>n.file_id == item.file_id);
					item.zanok == 1?this.info[filIndex].zanok = 0:this.info[filIndex].zanok = 1
					item.zanok == 1?this.info[filIndex].zan++:this.info[filIndex].zan--;
				})
			}
		},
		computed: {
			...mapState(['color']),
		},
		watch:{
			pageData(newVal){
				if(!newVal) return;
				this.info = newVal;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.headImg{
		width:72rpx;
		height: 72rpx;
		border:2px solid var(--color);
	}
	.listImg{
		width:600rpx;
		height: 190rpx;
		margin-top: 26rpx;
	}
	.listImg_li{
		width: 188rpx;
		height: 188rpx;
		margin-right: 18rpx;
	}
	.listImg_li:last-child{
		margin-right:0;
	}
	.punIt{
		width:24rpx;
		height: 24rpx;
		background-color: #ffffff;
		border-radius: 50%;
	}
	.navButton{
		position: absolute;
		background-color:transparent;
		width:100%;
		height: 100%;
		top:0;
		left:0;
		z-index:888;
	}
	.navButton::after{
		border:none;
	}
</style>

